<template>
  <div>
    <el-row>
      <el-col :span="6">
        <data-set title="总教室数" url="/api/classroom/count/all" :interval=0></data-set>
      </el-col>
      <el-col :span="6">
        <data-set title="使用中" url="/api/classroom/count/usageStatus?usageStatus=1" :interval=0></data-set>
      </el-col>
      <el-col :span="6">
        <data-set title="关闭" url="/api/classroom/count/usageStatus?usageStatus=0" :interval=0></data-set>
      </el-col>
      <el-col :span="6">
        <data-set title="故障" url="/api/classroom/count/usageStatus?usageStatus=2" :interval=0></data-set>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span=12 style="margin-top: 10px; padding: 10px">
        <el-row>
          <div style="border-left: 5px solid #409EFF; padding-left: 10px">
            教室分配情况
          </div>
        </el-row>
        <el-row>
          <el-col :span=12>
            <div style="margin: 0 auto; text-align: center">
              <div style="padding:20px; font-size: 12px; color: #777777;">今日分配执行情况</div>
              <div id="container"></div>
            </div>
          </el-col>
          <el-col :span=12>
            <div style="margin: 0 auto; text-align: center">
              <div style="padding:20px; font-size: 12px; color: #777777;">本周分配执行情况</div>
              <div id="container2"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span=12 style="margin-top: 10px; padding: 10px">
        <el-row>
          <div style="border-left: 5px solid #409EFF; padding-left: 10px">
            教室模式分布
          </div>
        </el-row>
        <div id="pie">

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { RingProgress, Pie } from '@antv/g2plot';
import DataSet from "../../components/DataSet";
import {countClassroomGroupByUsageMode} from "@/api/classroom";

export default {
  name: "ClassroomGeneral",
  components: {DataSet},
  created() {
    this.$nextTick(function () {
      this.a()
    })
  },
  methods: {
    a() {
      const ringProgress = new RingProgress('container', {
        height: 200,
        width: 310,
        autoFit: false,
        percent: 0.6,
        color: ['#F4664A', '#E8EDF3'],
        innerRadius: 0.85,
        radius: 0.98,
        statistic: {
          title: {
            style: { color: '#363636', fontSize: '12px', lineHeight: '14px' },
            formatter: () => '进度',
          },
        },
      });

      ringProgress.render();

      const ringProgress1 = new RingProgress('container2', {
        height: 200,
        width: 310,
        autoFit: false,
        percent: 0.7,
        color: ['#5B8FF9', '#E8EDF3'],
      });

      ringProgress1.render();

      let data = [];

      const piePlot = new Pie('pie', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'name',
        radius: 1,
        innerRadius: 0.6,
        label: {
          type: 'inner',
          offset: '-50%',
          content: '{value}',
          style: {
            textAlign: 'center',
            fontSize: 14,
          },
          autoRotate: false,
          statistic: {
            title: false,
            content: false,
          }
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
      });

      countClassroomGroupByUsageMode().then((response) => {
        piePlot.changeData(response.data.data)
      })

      piePlot.render();

    }

  }
}
</script>

<style scoped>

</style>